<template>
  <div class="service-team">
    <section class="banner">
      <img src="@/assets/banner/home_pic_yj.png">
    </section>
    <section class="container">
      <Row class="container-item">
        <Col span="4" class="container-item-img">
          <img src="@/assets/home_pic_ewm.png">
        </Col>
        <Col span="20" class="container-item-content left">
          <div class="container-item-content-title">
            <span class="title-cn">技术团队</span>
            <span class="title-icon">/</span>
            <span class="title-en">Technical Team</span>
          </div>
          <div class="container-item-content-text">
            公司现有70人，精通JAVA、.NET、Android、iOS、H5、JS、HTML的运用及开发，其中，本科以上技术人员占总人数 的85%，高级工程师占总人数的60%，团队成员具有丰富的行业经验
          </div>
          <div class="container-item-content-line"></div>
          <div class="container-item-content-index left">
            <span class="index">01</span>
            <span class="line"></span>
          </div>
        </Col>
      </Row>

      <Row class="container-item">
        <Col span="20" class="container-item-content right">
          <div class="container-item-content-title">
            <span class="title-cn">设计团队</span>
            <span class="title-icon">/</span>
            <span class="title-en">Design Team</span>
          </div>
          <div class="container-item-content-text">
            10名专业设计成员分为2组，一组负责UI设计，一组负责UED设计。他们精通BS、CS、CRM、APP等多种类型的设计特 点，为提高页面效果和用户体验负责
          </div>
          <div class="container-item-content-line"></div>
          <div class="container-item-content-index right">
            <span class="index">02</span>
            <span class="line"></span>
          </div>
        </Col>
        <Col span="4" class="container-item-img" style="margin: 0 0 0 60px;">
          <img src="@/assets/home_pic_ewm.png">
        </Col>
      </Row>

      <Row class="container-item">
        <Col span="4" class="container-item-img">
          <img src="@/assets/home_pic_ewm.png">
        </Col>
        <Col span="20" class="container-item-content left">
          <div class="container-item-content-title">
            <span class="title-cn">测试团队</span>
            <span class="title-icon">/</span>
            <span class="title-en">Test Team</span>
          </div>
          <div class="container-item-content-text">
            6人的专业测试团队，保证开发后的软件及各类管理系统的无bug上线。
          </div>
          <div class="container-item-content-line"></div>
          <div class="container-item-content-index left">
            <span class="index">03</span>
            <span class="line"></span>
          </div>
        </Col>
      </Row>

      <Row class="container-item" style="margin-bottom: 0;">
        <Col span="20" class="container-item-content right">
          <div class="container-item-content-title">
            <span class="title-cn">运维团队</span>
            <span class="title-icon">/</span>
            <span class="title-en">Operation Maintenance Team</span>
          </div>
          <div class="container-item-content-text">
            6人的专业运维团队，确保网络系统7*24小时的持续运作，2小时内及时响应
          </div>
          <div class="container-item-content-line"></div>
          <div class="container-item-content-index right">
            <span class="index">04</span>
            <span class="line"></span>
          </div>
        </Col>
        <Col span="4" class="container-item-img" style="margin: 0 0 0 60px;">
          <img src="@/assets/home_pic_ewm.png">
        </Col>
      </Row>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.container {
  width: 1200px;
  padding: 130px 0 200px 0;
  margin: 0 auto;
}
.container-item {
  width: 100%;
  height: 240px;
  margin-bottom: 100px;
}
.container-item-img {
  display: inline-block;
  width: 240px;
  height: 240px;
  margin-right: 60px;
}
.container-item-img img {
  width: 240px;
  height: 240px;
}
.container-item-content {
  position: relative;
  display: inline-block;
  width: calc(100% - 300px);
  height: 240px;
}
.container-item-content.left {
  padding: 0 170px 0 0;
}
.container-item-content.right {
  padding: 0 0 0 124px;
}
.container-item-content-title {
  margin: 0 0 24px 0;
}
.container-item-content-title .title-cn {
  font-size: 20px;
  color: rgba(51,51,51,1);
  line-height: 28px;
}
.container-item-content-title .title-icon {
  color: rgba(216,216,216,1);
  margin: 0 16px;
}
.container-item-content-title .title-en {
  font-size: 14px;
  color: rgba(153,153,153,1);
  line-height: 20px;
}
.container-item-content-text {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.container-item-content-line {
  position: absolute;
  bottom: 32px;
  width: 160px;
  height: 1px;
  background: rgba(230,230,230,1);
}
.container-item-content-index {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
}
.container-item-content-index.left {
  right: 0;
  top: 0;
}
.container-item-content-index.right {
  left: 0;
  top: 0;
}
.container-item-content-index .index {
  font-size: 36px;
  color: rgba(153,153,153,1);
  line-height: 50px;
  margin-bottom: 20px;
}
.container-item-content-index .line {
  width: 1px;
  height: 80px;
  background: rgba(230,230,230,1);
}
</style>
